<template>
    <div class="commonWrapper">
        <Header />
        <img width="100%" src="@/assets/images/topBg.png" alt="">
        <div class="carWrapper">
            <div class="container">

                <div class="indexTitle">
                    <h2>帮助与反馈</h2>
                </div>
                <div class="topNav" style="margin-bottom:20px;">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>帮助与反馈</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="carContent">
                    <!-- 搜索 -->
                    <div class="carSearch">
                        <div class="searchLeft">
                            <span class="serachResult">共找到{{ total }}个结果</span>
                        </div>
                        <div class="searchRight">
                            <div class="searchContent" style="width:280px">
                                <el-input clearable placeholder="请输入要查找的功能关键字" v-model="params.title"
                                    class="input-with-select">
                                    <el-button slot="append" type="primary" @click="onSubmit">搜索</el-button>
                                </el-input>
                            </div>
                            <el-button class="resetBtn" @click="onReset">重置</el-button>
                        </div>
                    </div>
                    <div class="mainContent">
                        <div class="setNew">
                            <div class="cartitle">
                                <span class="smallTip"></span>
                                <h3>功能说明</h3>
                            </div>
                            <el-button icon="el-icon-edit" @click="handleAdd('add')" type="primary">我要反馈</el-button>
                        </div>
                        <div class="parkList">
                            <div class="itemNone" v-if="tableData.length == 0">
                                <p>目前暂无数据</p>
                            </div>
                            <ul v-else>
                                <li v-for="items in tableData" :key="items.id" @click="handleDetail(items.id)">
                                    <div class="parkImg">
                                        <p>{{ items.title }}
                                        </p>
                                        <i class="el-icon-arrow-right"></i>
                                    </div>
                                </li>

                            </ul>
                        </div>
                        <div class="indexPage">
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                :current-page="params.page" :page-sizes="[10, 20, 30, 40]" :page-size="params.pageSize"
                                background layout="total, prev, pager, next, sizes,jumper" :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
            <Link />
        </div>
        <Footer />
        <RoomDialog @getTrain="getTrain" ref="formContent" />
    </div>
</template>
<script>

// import RoomDialog from "./enterDetails.vue"
import { specificationListNone } from "@/request/api/specification"
import Link from "@/components/home/footer/link"
import Header from "@/components/home/header/header";
import Footer from "@/components/home/footer/footer";
import RoomDialog from "@/view/personalCenter/helpFeedback/feedback/feedbackDialog.vue"
export default {
    components: {
        Link,
        Header,
        Footer,
        RoomDialog
        // RoomDialog
    },
    data() {
        return {
            tableData: [],
            params: {
                page: 1,
                pageSize: 10,
                title: "",//标题
            },
            total: 0
        }
    },
    created() {
        this.getTrain()
    },
    methods: {
        // 遍历
        getTrain() {
            specificationListNone(this.params).then(res => {
                if (res.data.code === 200) {
                    this.tableData = res.data.result.items
                    this.total = res.data.result.total
                }
            })
        },
        // 园区介绍
        toDetail(id) {
            this.$router.push({
                name: "enterDetails",
                query: {
                    id,
                },
            });
        },
        // 搜索
        onSubmit() {
            this.params.page = 1;
            this.getTrain();
        },
        // 重置
        onReset() {
            this.params.title = ''
            this.params.page = 1;
            this.getTrain();
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.page = 1;
            this.getTrain();
        },
        handleCurrentChange(val) {
            this.params.page = val;
            this.getTrain();
        },
        // 查看详情
        handleDetail(id) {
            this.$router.push({
                name: "functionalDetail",
                query: {
                    id,
                },
            });
        },
        // 我要反馈
        handleAdd(type, data) {
            var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            if (window.sessionStorage.getItem("userInfo") !== null) {
                if (userInfo.iuiCertification === "1") {
                    // 实名
                    this.$refs.formContent.open(type, data)
                } else {
                    if (userInfo.registrationType == '1') {//个人
                        this.$message({
                            message: "您尚未进行实名认证或认证申请处于审核状态，请先认证后再进行相关操作！",
                            type: "warning",
                        });
                    } else {
                        this.$message({
                            message: "您尚未进行企业认证或认证申请处于审核状态，请先认证后再进行相关操作！",
                            type: "warning",
                        });
                    }

                }
            } else {
                this.$message({
                    message: '请登录后进行反馈！',
                    type: 'warning'
                });
            }
        },
    }
}
</script>
<style lang="less" scoped>
@import "./functional.less";
</style>

